<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <a-form :form="form">
            <a-form-item style="display:none">
                <a-input v-decorator="['id']"/>
            </a-form-item>
            <a-row>
                <a-col :span="12">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.typeName','类型名称')">
                        <a-input :placeholder="i18n('form.typeName','类型名称')" v-decorator="['name', {rules: [{required: false, message: this.i18n('form.typeName','类型名称','input')}]}]"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.status','状态')">
                        <a-radio-group
                            :placeholder="i18n('form.status','状态')"
                            v-decorator="['status', {initialValue:'ENABLED',rules: [{required: true, message: i18n('form.status','状态','input')}]}]"
                        >
                            <a-radio-button value="ENABLED">
                                {{i18n('isStatusMap.enabled','启用')}}
                            </a-radio-button>
                            <a-radio-button value="DISABLED">
                                {{i18n('isStatusMap.disabled','禁用')}}
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.displayMethod','展示方式')">
                        <a-radio-group buttonStyle="solid"  v-decorator="['dataShowType', {initialValue:'FLAT',rules: [{required: false, message: this.i18n('form.displayMethod','展示方式','input')}]}]">
                            <a-radio-button value="FLAT">
                                {{i18n('isDataShowTypeMap.enabled','平铺') }}
                            </a-radio-button>
                            <a-radio-button value="TREE">
                                {{i18n('isDataShowTypeMap.treeForm','树型')}}
                            </a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.dialogSelect','对话框选择')">
                        <rx-input-button ref="dialog" width="80%"  @click="selectDialog" v-decorator="['dialog', {rules: [{required: true, message: i18n('form.dialogSelect','对话框选择','input')}]}]"></rx-input-button>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.valueField','值字段')">
                        <a-select style="width: 100%;" allowClear :options="fields"
                                  v-decorator="['idField', {rules: [{required: true, message: i18n('form.valueField','值字段','input')}]}]"></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.textField','文本字段')">
                        <a-select style="width: 100%;" allowClear :options="fields"
                                  v-decorator="['textField', {rules: [{required: true, message: i18n('form.textField','文本字段','input')}]}]"></a-select>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </rx-dialog>
</template>
<script>
    import FormEntityDataTypeApi from '@/api/form/core/formEntityDataType'
    import {BaseForm,RxDialog,RxGrid,Dialog} from "@lowcode/jpaas-common-lib";
    import FormBoListApi from "@/api/form/core/formBoList";
    export default {
        name: 'FormEntityDataTypeEdit',
        mixins:[BaseForm],
        components: {
            RxDialog,
            RxGrid
        },
        data(){
            return {
                fields: [],
                complexJson:{
                    main: {
                        dialog: {text: "dialogName", value: "dialogAlias"}
                    }
                },
            }
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formEntityDataType",key);
            },
            onload_(values){
                if(values){
                    values.dataShowType=values.dataShowType || 'FLAT';
                    FormBoListApi.getByKey(values.dialogAlias).then(res=>{
                        this.initField(res.data.fieldsJson);
                    })
                }
            },
            get(id){
                return FormEntityDataTypeApi.get(id);
            },
            save(values){
                return FormEntityDataTypeApi.save(values);
            },
            selectDialog(vm) {
                Dialog.openFormBoListDialog({
                    curVm: this, widthHeight: ['800px', '600px'],
                    data: {isDialog: 'YES'},
                }, function (self, data) {
                    if (!data || data.length == 0) {
                        self.$notification.warning({
                            message: this.$ti18('rxMsa.tipsInfo','提示信息'),
                            description: this.i18n('form.dialog','对话框','input')
                        })
                        return;
                    }
                    var row=data[0];
                    vm.setVal(row.key, row.name);
                    self.initField(row.fieldsJson);
                });
            },
            initField(fieldsJson){
                var fields=JSON.parse(fieldsJson);
                this.fields=[];
                for(var i=0;i<fields.length;i++){
                    var field=fields[i];
                    if(field.isReturn){
                        this.fields.push({label:field.header,value:field.field});
                    }
                }
            }
        }
    }
</script>
